﻿<!doctype html>
<html>

	<head>
		<title>HAPPY BIRTHDAY TO YOU</title>
		<meta charset="UTF-8" >
		
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				
				background: #0c0109;
				
			}
			
			#divTyping {
				position: absolute;
				top: 150px;
				left: 150px;
				width: 350px;
				color: deeppink;
				font-size: 26px;
			}
			
			.heart3d {
				position: absolute;
				top: 150px;
				right: 200px;
				width: 300px;
				height: 300px;
				transform-style: preserve-3d;
				animation: rotate 10s linear infinite;
			}
			
			
			
			.heart3d div[class^="rib"] {
				position: absolute;
				top: 30px;
				left: 130px;
				width: 140px;
				height: 250px;
				border: solid #f00;
				border-width: 1px 0px 0px 1px;
				border-radius: 57% 50% 0% 0%/50% 50% 0% 0%;
			}
			
			@keyframes rotate {
				from {
					transform: rotateY(0deg) rotateX(0deg);
				}
				to {
					transform: rotateY(360deg) rotateX(360deg);
				}
			}
			
			.snow {
				background: white;
				position: absolute;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				z-index: -1;
			}
			
			
			
			
			
			
			


		</style>
		
		
		
	</head>

	<body>
		<audio src="img/dwanmyly.mp3" autoplay="autoplay"></audio>
		<div id='heart3d' class="heart3d"></div>
		<script type="text/javascript">
			var oHeart3d = document.getElementById('heart3d'); 
			var str = "";
			for(var i = 1; i <= 36; i++) {
				str += '<div class="rib' + i + '"></div>';
			}
			oHeart3d.innerHTML = str;
			var oDiv = oHeart3d.getElementsByTagName("div");
			for(var i = 0; i < oDiv.length; i++) {
				oDiv[i].style.transform = "rotateY(" + (i + 1) * 10 + "deg) rotateZ(-45deg) translateX(-55px)";
			}
		</script>

		<div id='divTyping'></div>
		<script type="text/javascript">
			var str = '慧慧小仙女那么美'+'<br/>'+'迎来第十个十七岁'+'<br/>'
			+'千万不要说我虚伪'+'<br/>'
			+'此生结识你最可贵'+'<br/>'+
			'祝你生日快乐，越来越开心，越来越漂亮！'+'<br/>'+'你可爱的同桌献上！';
			var x = 0;

			function typing() {
				var divTyping = document.getElementById('divTyping');
				if(x <= str.length) {
					divTyping.innerHTML = str.slice(0, x++) + '_'; 
					setTimeout('typing()', 200); 
				} else {
					divTyping.innerHTML = str; 
				}
			}
			typing();
		</script>

		<script type="text/jscript">
			
			var windowWidth =  window.screen.width; 
			var windowHeight = window.screen.height;

			function createSnow() {
				var left = 0;
				var top = 0;

				
				var left_random = Math.random() * windowWidth;
				var top_random = Math.random() * windowHeight;
				var div = document.createElement('div');
				div.className = 'snow';
				div.style.transform = 'scale(' + (Math.random()) + ')';

				document.body.appendChild(div);

				
				setInterval(function() {
					
					div.style.left = left_random + left + 'px';
					div.style.top = top_random + top + 'px';
					left += 0.2;
					top += 0.2;

					
					if(left_random + left >= windowWidth) {
						left_random = Math.random();
						left = 0;
					}

					if(top_random + top >= windowHeight) {
						top_random = Math.random();
						top = 0;
					}
				}, 10)
			}
			for(var i = 0; i < 200; i++) {
				createSnow();
			}
		</script>

	</body>

</html>